<template>
  <div class="maskCenter">
    <div id="box" :class="visible ? 'systemDialog' : 'systemDialog-hide'" style="height: 700px; width: 950px">
      <div class="dialog-header" v-movew>
        <span>{{ titleinfo }}</span>
        <el-tooltip class="item" effect="dark" content="关闭" placement="top-start">
          <span class="icon iconfont iconbiaoqianlan-guanbi close" @click="hide"></span>
        </el-tooltip>
      </div>
      <div class="dialog-body">
        <el-form ref="form" label-width="75px" :label-position="'left'">
          <el-form-item class="noLabel">
            <el-col :span="24">
              <span>留言信息</span>
            </el-col>
          </el-form-item>
          <el-form-item class="noLabel">
            <el-col :span="24">
              <el-input class="systemInput" type="textarea" :autosize="{ minRows: 3, maxRows: 3 }" v-model="backInfo.word"
                :resize="'none'"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item class="noLabel">
            <el-col :span="5">
              <span>回退节点选择</span>
            </el-col>
          </el-form-item>
          <el-form-item class="noLabel">
            <el-col :span="8">
              <div class="edge-div">
                <div class="tb-td tb-edge" v-for="(item, index) in node" :key="index">
                  <el-checkbox v-model="item.selected" :disabled="enable"
                    @change="nodeChange($event, index)"></el-checkbox>
                  {{ item.wpNodeName ? item.wpNodeName : "" }}
                </div>
              </div>
            </el-col>
            <el-col :span="16">
              <div class="user-div">
                <div class="tb-head">
                  <el-col :span="2"> </el-col>
                  <el-col :span="4">姓名</el-col>
                  <el-col :span="14">部门</el-col>
                  <el-col :span="4">账号</el-col>
                </div>
                <div class="tb-td" v-for="(user, index) in actNode.user" :key="index" :class="{
                  'tb-td-active': index == actUserIndex,
                  'tb-td-odd': index % 2 == 0,
                }">
                  <el-col :span="2">
                    <el-checkbox v-model="user.selected" @change="userChange($event, index)"></el-checkbox>
                  </el-col>
                  <el-tooltip class="item" effect="dark" :content="user.name" placement="top">
                    <el-col :span="4">{{ user.name | ellipsis }}</el-col>
                  </el-tooltip>
                  <el-tooltip effect="dark" placement="top" :content="user.deptName">
                    <el-col :span="14">{{ user.deptName }}</el-col>
                  </el-tooltip>
                  <el-col :span="4">{{ user.account }}</el-col>
                </div>
              </div>
            </el-col>
          </el-form-item>

          <el-form-item class="noLabel">
            <el-col :span="22">
              <el-checkbox v-model="backInfo.msg">短信提醒</el-checkbox>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer right">
        <span class="systemButtonConfirm" @click="backTo">确认</span>
        <span class="systemButtonConfirm" @click="hide">取消</span>
      </div>
    </div>
  </div>
</template>

<script>
import movew from "@/directives/winmove";
import { deepCopy } from "@/utils/public";
import { workplangetBack, workplanBack } from "@/system/api/bussinessBack";

export default {
  directives: {
    movew,
  },
  name: "businessBack",

  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 4) {
        return value.slice(0, 4) + "...";
      }
      return value;
    },
  },

  props: {
    title: {
      //模块名  必须   启动的时候需要
      default: null,
    },
    wpInstNodeId: {
      //待回退的计划实例节点
      default: null,
    },
  },
  data() {
    return {
      enable: true,
      selectedLIst: [],
      actEdgeIndex: 0,
      visible: true,
      wpName: "",
      titleinfo: "业务回退",
      actNode: { userMulti: false, actUser: null, selectedAll: false },
      mustWord: false, //mustWord = true 时必选填写留言内容
      backInfo: {},
      node: [{}],
      actUserIndex: -1,
    };
  },
  computed: {},
  mounted() {
    this.getBackInfo();
  },
  methods: {
    userChange(e, index) {
      //如果当前node  只允许 单选  ，那么当前 用户选中的话，其它所有的用户置为不选中
      if (!this.actNode.userMulti) {
        if (e) {
          this.clearSelectedUser(index);
        }
      }
    },
    clearSelectedUser($index) {
      //清空所有用户选中状态 除了 选中的  $index  的用户(用户单选)
      this.actNode.user.forEach((user, index) => {
        if ($index != index) {
          user.selected = false;
        }
      });
    },
    hide() {
      this.visible = false;
      setTimeout(() => {
        this.$emit("close");
      }, 400);
    },
    ok() {
      this.visible = false;
      setTimeout(() => {
        this.$emit("ok", true);
      }, 400);
    },
    //根据路由状态
    nodeChange(e, index) {
      //路由单选  ，那么清空所有路由
      this.node.forEach((node, i) => {
        node.selected = false;
      });
      if (e) {
        this.node[index].selected = true;
        this.actNode.user = this.node[index].user;
      } else {
        this.clearNodeUser(index);
      }
    },
    clearNodeUser(index) {
      if (this.node[index].user == undefined) {
        return;
      }
      this.node[index].user.forEach((user, index) => {
        user.selected = false;
      });
    },
    getBackInfo() {
      //获取业务回退信息
      workplangetBack({ wpInstNodeId: this.wpInstNodeId }).then((res) => {
        if (res.success) {
          this.backInfo = res.info;
          if (this.backInfo.node != undefined) {
            this.node = this.backInfo.node;
            this.enable = false;
            this.initNOde();
          }
        } else {
          this.message(res.msg, 2);
        }
      });
    },
    initNOde() {
      //初始化node  的  selected
      this.node.forEach((node, index) => {
        this.$set(node, "selected", false);
      });
    },
    backTo() {
      var nodes = [];
      for (var i = 0; i < this.node.length; i++) {
        //删除节点下没有打钩的节点
        if (this.node[i].selected) {
          nodes.push(this.node[i]);
        }
      }
      var users = [];
      for (var j = 0; j < this.actNode.user.length; j++) {
        //删除节点下没有打钩的节点
        if (this.actNode.user[j].selected) {
          users.push(this.actNode.user[j]);
        }
      }
      if (nodes.length === 0) {
        this.message("请选择需要一个回退的节点", 2);
        return;
      } else {
        if (users.length == 0) {
          this.message("请选择需要一个回退的人员", 2);
          return;
        } else {
          console.log(users);
          this.backInfo.node = nodes; //绑定新节点
          this.backInfo.node.user = users;
          this.backInfo.fromNode.wpInstNodeId = this.wpInstNodeId;
          workplanBack(this.backInfo).then((res) => {
            if (res.success) {
              this.ok();
            } else {
              this.message(res.msg, 2);
            }
          });
        }
      }
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  background: var(--win-head-back-color);
  margin: 4px;
  text-align: left;
}

.header .title {
  width: calc(100% - 25px);
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: var(--system-page-topbar-text-color);
  margin-left: 12px;
}

.header .close {
  font-size: 12px;
  width: 12px;
  height: 12px;
  margin-right: 9px;
}

.dialog-body {
  color: var(--page-lable-text-color);
}

.btndiv {
  border: 1px solid var(--button-border-color);
  border-radius: 4px;
  margin-left: 5px;
  line-height: 22px;
  width: 68px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background: var(--button-back-color);
}

.btndiv:hover {
  background: var(--button-hover-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}

.btndiv:active {
  background: var(--button-active-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}

/*每行的标签高度设为32px*/
>>>.el-form-item__label {
  line-height: 32px;
}

/*设置el-form-item的高度*/
>>>.el-form-item__content {
  height: 32px;
  line-height: 32px;
}

/*数字输入框的上箭头行高*/
>>>.el-input-number__increase,
>>>.el-input-number__decrease {
  line-height: 16px !important;
}

/*数字输入样式*/
>>>.el-input-number {
  line-height: 32px;
  width: 100%;
}

/*element 输入框样式*/
>>>.el-input__inner {
  line-height: 32px;
  height: 32px;
  width: 100%;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

/*element 下拉框*/

>>>.el-input__inner:focus {
  border: 1px solid var(--input-focus-border-color);
}

/*下拉框箭头*/

>>>.el-select__caret {
  line-height: 32px;
}

/*el-form-item 每行离底部多元*/
>>>.el-form-item {
  margin-bottom: 10px;
}

/*tabs 样式*/
>>>.el-tabs__header {
  margin: 0;
}

.el-tabs {
  height: 100%;
}

>>>.el-tabs__active-bar {
  width: 70px !important;
  left: -5px;
}

>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 0px;
}

>>>.el-tabs__item {
  padding: 0 10px;
  font-weight: bold;
  letter-spacing: 2px;
  height: 26px;
  line-height: 26px;
  color: var(--disable-text-color);
}

/*活动颜色*/
>>>.el-tabs__item.is-active {
  color: var(--active-color);
}

/*tabs 分割线*/
>>>.el-tabs__nav-wrap::after {
  height: 0px;
  background-color: var(--page-back-color);
}

/*tabs 前面没有标签内容要显示,去除margin-left*/
.noLabel>>>.el-form-item__content {
  margin-left: 0 !important;
  text-align: left;
}

.footer {
  padding-right: 20px;
  height: 60px;
  line-height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 20px;
}

/*element 输入框的 focus hover样式*/
>>>.el-input__inner:focus,
>>>.el-textarea__inner:focus {
  background: var(--input-focus-back-color);
  border: 1px solid var(--input-focus-border-color);
  border-radius: 4px;
}

>>>.el-input__inner:hover,
>>>.el-textarea__inner:hover {
  background: var(--input-hover-back-color);
  border: 1px solid var(--input-focus-border-color);
}

>>>.el-form-item__label,
>>>.el-checkbox__label {
  color: var(--page-lable-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

.edge-div,
.user-div {
  width: 100%;
  height: 350px;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  background: var(--page-back-color);
  overflow: auto;
}

.edge-div {
  width: calc(100% - 17px);
}

.tb-head {
  background: var(--table-head-back-color);
  color: var(--table-head-text-color);
  height: 32px;
  line-height: 32px;
}

.tb-head>>>.el-col-2,
.tb-td>>>.el-col-2 {
  text-align: center;
  height: 32px;
}

.tb-td {
  color: var(--table-text-color);
  height: 32px;
  line-height: 32px;
}

.tb-td-odd {
  background: var(--table-row-odd-back-color);
}

.tb-td:hover {
  background: var(--button-hover-back-color);
  color: var(--table-head-text-color);
  cursor: pointer;
}

.tb-td-active {
  background: var(--button-active-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}

.tb-edge {
  padding-left: 9px;
}

>>>.el-textarea__inner {
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

/*部门显示不下...*/
>>>.el-col-14 {
  padding-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>